<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="IP" align="center" prop="ip" />
      <el-table-column label="操作" align="center" prop="logName" />
      <el-table-column label="接口" align="center" prop="api" />
      <el-table-column label="方法" align="center" prop="method" />
      <el-table-column label="时间" align="center" prop="name">
        <template slot-scope="scope">
          {{ scope.row.createTime ? scope.row.createTime.substr(0, 19).replace('T', ' ') : '' }}
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pagination-container">
      <el-pagination :current-page="currentPage" :total="listCount" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-row>
  </div>
</template>
<script>
import { pagination } from '@/mixins/index'
export default {
  mixins: [pagination],
  data() {
    return {
      list: null,
      listCount: 1,
      listLoading: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.listLoading = true
      this.$http.request({
        url: `/logs/${this.page}/${this.limit}`,

        data: {},
        tokenRefresh: () => this.getData()
      }).then(res => {
        const { list, total } = res.pageInfo
        this.list = list
        this.listCount = total
        this.listLoading = false
      })
    }
  }
}
</script>
